<template>
  <div class="tips animation" v-show="isShow" :class="{'shake': type === 'shake'}" ref="tips">
    <div class="content">{{ msg }}</div>
  </div>
</template>
<script>
export default {
  name: 'Pops',
  props: {
    msg: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isShow: function (newVal, oldVal) {
      this.$nextTick(function () {
        if (newVal !== oldVal && newVal === true) {
          const width = this.$refs.tips.clientWidth;
          const height = this.$refs.tips.clientHeight;
          this.$refs.tips.style.marginLeft = -width / 2 + 'px';
          this.$refs.tips.style.marginTop = -height / 2 + 'px';
        }
      });
      setTimeout(() => {
        this.isShow = false;
        this.msg = '';
        this.type = '';
      }, 2000);
    }
  }
};
</script>
<style scoped lang="scss">
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  animation-name: shake;
}

.tips {
  position: fixed;
  left: 50%;
  top: 50%;
}

.animation {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.content {
  background-color: rgba(0,0,0,0.4);
  color: #fff;
  padding: 10px 15px;
  border-radius: 6px;
}
</style>
